<template>
  <div class="songsheet">
     <div class="top"> 
      <h1>精选歌单</h1>
      
      
      <ul>
          <li v-for="(item,index) in list" :key="index" @click="send1(index)" :class="{active:index==num}">{{item}}</li>
          
      </ul>
    </div>
     <div class="new">
      <ul v-show="num==0?true:false">
          <li v-for="(item,index) in newlist" :key="index" @click='send(item.id)'>
              <img :src="item.pic" alt="">
              <p>{{item.name}}</p>
              <p> <i class="fa fa-play"></i>{{item.count_play/10000+".万"}}</p>
          </li>
         
      </ul>
    </div>   
    <div class="new">
    <ul v-show="num==1?true:false">
          <li v-for="(item,index) in verylist" :key="index" @click='send(item.id)'>
              <img :src="item.pic" alt="">
              <p>{{item.name}}</p>
              <p> <i class="fa fa-play"></i>{{item.count_play/10000+".万"}}</p>
          </li>
        
      </ul>
    </div> 
  </div>
 
</template>

<script>
import {mapState} from 'vuex'
export default {
    data(){
        return {
            list:['最新','最热'],
            num:0
        }
    },
    methods:{
        send1(i){
            this.num=i
            // console.log(i);
        },
        send(i){
            this.$router.push({
                path:'/songlist',
                query:{
                    id:i
                }
            })
        }

    },
    computed:mapState({
        newlist:state=>state.new,
         verylist:state=>state.very
        
    }),
    
    created(){
        this.$store.dispatch('newlist')
         this.$store.dispatch('verylist')
    }
}
</script>

<style lang="scss" scoped>
.active{
     background-color: #ffe443;
}
.songsheet{
    width: 1400px;
    margin: 0 auto;
    margin-bottom: 200px;
    .top{
        display: flex;
        ul{
          display: flex;
          
           li{
        margin-top: 10px;
           margin-left: 30px;
           display: block;
           width: 50px;
           height: 25px;
          
           text-align: center;
           line-height: 25px;
                
           }
        }
    }
    .new{
        ul{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            li{
                width: 250px;
                height: 250px;
                margin-top: 80px;
                img{
                     width: 250px;
                    height: 250px;
                    border-radius: 20px;
                }
                i{
                    color: #444;
                    
                }
                p{
                    width: 250px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
            }
        }
    }
}
</style>